import './Scss/BeamMap.scss'
import { useRequest, useEventEmitter, useBoolean, useThrottleFn } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState, useRef } from 'react'
import { Initialization, InitializationData } from '../../../../Common/Mars3d/Initialization'
import { WebTemplateUrl, WebCommonUrl } from './configuration'
import { FrontModalBox } from '../Modal'
import { useLatest } from '@ant-design/pro-components'

const { mars3d } = window

const colorList = {
    钢筋骨架安装: '#FFCB4F',
    混凝土浇筑: '#559DFF',
    养生: '#5AAC5A',
    张拉: '#885BDC',
    压浆: '#D77A3C',
    空闲: '#C6C6C6',
}
const Bottom = ({ data, Active }) => {
    if (data && Active) {
        const list = data.find(v => v.organizationUuid === Active)
        if (list) {
            return (
                <div className="Bottom">
                    {Object.keys(colorList).map((item, index) => (
                        <div key={index}>
                            <div style={{ background: colorList[item] }} />
                            <div>{item}: </div>
                            <div>{list[item]}</div>
                        </div>
                    ))}
                </div>
            )
        }
    }
}

export const BeamMap001 = ({ uuid, NavEvent }) => {
    NavEvent.useSubscription(val => run(val))
    const [Active, setActive] = useState()
    const ActiveLatest = useLatest(Active)
    const { run } = useThrottleFn(
        val => {
            if (Gra && Map) {
                const { organizationUuid, remark } = val
                Map.centerAt(JSON.parse(remark))
                setActive(organizationUuid)
            } else run(val)
        },
        { wait: 500 },
    )
    const Mars3dBox = useRef()
    const [boxData, setBoxData] = useState()

    const [Gra, setGra] = useState()
    const [Map, setMap] = useState()

    const { runAsync: getScenesDetails } = useRequest(Http, { manual: true })
    const { runAsync: getBeamSeatProcessNameRecord } = useRequest(Http, { manual: true })
    const { runAsync: getBeamSeatBeamModel } = useRequest(Http, { manual: true })
    const { run: getScenes } = useRequest(Http, {
        manual: true,
        onSuccess: res => Initialization(res, Mars3dBox, InitializationEvent),
    })
    useEffect(() => {
        getScenes({ url: `getScenesID`, path: [uuid] })
    }, [getScenes, uuid])

    const [OptionsCall, setOptionsCall] = useState()

    const InitializationEvent = useEventEmitter()
    InitializationEvent.useSubscription(({ map, gra, uuid }) => {
        getScenesDetails({ url: `getScenesDetailsUuid`, path: [uuid] }).then(res => {
            console.log(res)
            InitializationData(map, gra, res)
            setGra(gra)
            setMap(map)
            getScenesDetails({ url: `getGetBeamSeatProcessName` }).then(res => {
                setBoxData(res.list)
            })
            getBeamSeatProcessNameRecord({ url: 'getBeamSeatProcessNameRecord' }).then(res => {
                res.list.forEach(item => {
                    const style = { url: item.modelUrl, heading: item.heading, fill: true }
                    style.color = colorList[item.processName]
                    if (gra.getGraphicById(item.tableName)) {
                        gra.getGraphicById(item.tableName).show = true
                        gra.getGraphicById(item.tableName).style = style
                    }
                })
            })
        })

        getBeamSeatBeamModel({ url: 'getBeamSeatBeamModel', data: { componentType: 2 } }).then(res => {
            const ModalList = res.list.map(item => item.tableName)
            gra.on('click', ({ graphic }) => {
                const { type } = graphic
                if (type === 'model' && ModalList.indexOf(graphic.id) !== -1) {
                    const getInnerHtml = () =>
                        `<div class='BeamModalBox'>
                            <div class='first'>
                                <img src='${WebCommonUrl}BeamFirst.png' alt="" />
                                <div id='one'> 基本信息 </div>
                            </div>
                            <div class='center'>
                                <img src='${WebCommonUrl}BeamCenter.png' alt="" />
                                <div id='two'> 智能张拉 </div>
                            </div>
                            <div class='last'>
                                <img src='${WebCommonUrl}BeamLast.png' alt="" />
                                <div id='thr'> 智能压浆 </div>
                            </div>
                            <img src='${WebCommonUrl}BeamBtm.png' alt="" />
                        </div>`
                    graphic.on(mars3d.EventType.popupOpen, ({ container }) => {
                        const one = container.querySelector('#one')
                        const two = container.querySelector('#two')
                        const thr = container.querySelector('#thr')
                        if (one)
                            one.addEventListener('click', () => {
                                setOptionsCall({
                                    type: 'BeamSliceDetail',
                                    data: { title: '基本信息', data: { uuid: graphic.id } },
                                })
                            })
                        if (two)
                            two.addEventListener('click', () => {
                                setOptionsCall({
                                    type: 'FrontTAPDetails',
                                    data: { title: '智能张拉', data: { uuid: graphic.id, type: 0 } },
                                })
                            })
                        if (thr)
                            thr.addEventListener('click', () => {
                                setOptionsCall({
                                    type: 'FrontTAPDetails',
                                    data: { title: '智能压浆', data: { uuid: graphic.id, type: 1 } },
                                })
                            })
                        graphic.closePopup()
                    })
                    // 绑定Popup
                    graphic.bindPopup(getInnerHtml).openPopup()
                } else if (type === 'label') {
                    setOptionsCall({
                        type: 'BeamPedestalDetail',
                        data: {
                            title: '台座生产记录',
                            data: { BeamModelCode: graphic.id, organizationUuid: ActiveLatest.current },
                        },
                    })
                }
            })
        })
    })

    return (
        <div className="BeamMap001">
            <div className="BeamMap" ref={Mars3dBox} />
            <img src={WebTemplateUrl + 'Mask.png'} alt="" />
            <Bottom data={boxData} Active={Active} />
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
